<!-- 菜单 -->
<template>
  <div class="home-wrap">
    <layout class="layout">
      <Header class="header">
        <div class="header-logo">
          <img src="@/assets/images/logo.png" alt="">
        </div>
        <div class="header-operate">
          <div class="uesr-name">欢迎：{{ userName }}</div>
          <div class="user-operate">
            <div class="reset-password" @click="showResetPassword">重置密码</div>
            <div class="logout" @click="logout">退出登录</div>
          </div>
        </div>
      </Header>
      <Layout>
        <Sider hide-trigger class="sider">
          <Menu :active-name="activemenu" theme="light" accordion width="auto" :open-names="[openName]" @on-select="checkItem" @on-open-change="checkSubmenu">
            <Submenu name="order">
              <template slot="title">
                <Icon type="ios-paper" />商户管理
              </template>
              <menu-item to="./channelProvider" name="商户管理,channelProvider">商户管理</menu-item>
              <menu-item to="./merchantManagement" name="商户人员管理,merchantManagement">商户人员管理</menu-item>
              <menu-item to="./distributionAgencies" name="分销机构管理,distributionAgencies">分销机构管理</menu-item>
              <menu-item to="./distributionManagement" name="分销人员管理,distributionManagement">分销人员管理</menu-item>
              <menu-item to="./uploadJs" name="上传微信配置文件,uploadJs">上传微信配置文件</menu-item>
            </Submenu>
            <Submenu name="premises">
              <template slot="title">
                <Icon type="ios-albums" />楼盘管理
              </template>
              <menu-item to="./premisesList" name="楼盘列表,premisesList">楼盘列表</menu-item>
              <menu-item to="./dynamicList" name="楼盘动态列表,dynamicList">楼盘动态列表</menu-item>
            </Submenu>
            <Submenu name="report">
              <template slot="title">
                <Icon type="ios-albums" />报备管理
              </template>
              <menu-item to="./vusPreNormalList" name="通用报备查询,vusPreNormalList">通用报备查询</menu-item>
              <menu-item to="./vusPreHistoryList" name="历史报备查询,vusPreHistoryList">历史报备查询</menu-item>
              <menu-item to="./v10AsyncList" name="V10报备同步记录,v10AsyncList">V10报备同步记录</menu-item>
              <menu-item to="./wanhaoReport" name="批量导入报备,wanhaoReport">批量导入报备</menu-item>
            </Submenu>
            <Submenu name="system">
              <template slot="title">
                <Icon type="ios-paper" />系统管理
              </template>
              <menu-item to="./apiLog" name="接口互通日志,apiLog">接口互通日志</menu-item>
              <menu-item to="./smsHistorySummary" name="短信发送统计,smsHistorySummary">短信发送统计</menu-item>
              <menu-item to="./smsHistoryFailure" name="短信失败记录,smsHistoryFailure">短信失败记录</menu-item>
              <menu-item to="./wxMsgFailure" name="短信失败记录,wxMsgFailure">微信失败消息记录</menu-item>
            </Submenu>
            <Submenu name="commission" v-if="false">
              <template slot="title">
                <Icon type="ios-paper" />佣金管理
              </template>
              <menu-item to="./commissionList" name="佣金列表,commissionList">佣金列表</menu-item>
            </Submenu>
          </Menu>
        </Sider>

        <div class="content">
          <div class="scroll-wrap">
            <div class="btn-con left-btn">
              <Button type="text" @click="handleScroll(240)">
                <Icon :size="18" type="ios-arrow-back" />
              </Button>
            </div>
            <div class="btn-con right-btn">
              <Button type="text" @click="handleScroll(-240)">
                <Icon :size="18" type="ios-arrow-forward" />
              </Button>
            </div>
            <div class="tags" ref="scrollOuter">
              <div class="sc" :style="`left: ${posLeft}px`" ref="scrollBody">
                <Tag
                  v-for="(item, index) in tagsList"
                  :key="index"
                  type="dot"
                  closable
                  :color="$route.path.substring(1) === item.url || $route.path.substring(1) === item.path ? 'primary' : 'default'"
                  @on-close="deleteTag(item, index)"
                  @click.native="handleClick(item)"
                >
                  {{ item.label }}
                </Tag>
              </div>
            </div>
          </div>
          <div class="content-wrap">
            <router-view></router-view>
          </div>
        </div>
      </Layout>
    </layout>
    <Modal
      v-model="showReset"
      title="重置密码"
      width= "300"
    >
      <div class="reset-form">
        <Form ref="resetForm" :model="resetForm" :rules="formRule">
          <FormItem prop="userName" label="用户名：">
            <Input prefix="ios-contact" type="text" disabled v-model="userName" placeholder="用户名"/>
          </FormItem>
          <FormItem prop="oldPassword" label="原始密码：">
            <Input prefix="ios-lock-outline" type="password" v-model="resetForm.oldPassword" placeholder="请输入密码"/>
          </FormItem>
          <FormItem prop="newPassword" label="新密码：">
            <Input prefix="ios-lock-outline" type="password" v-model="resetForm.newPassword" placeholder="请输入密码"/>
          </FormItem>
          <FormItem prop="confirmPassword" label="确认新密码：">
            <Input prefix="ios-lock-outline" type="password" v-model="resetForm.confirmPassword" placeholder="请再次输入密码"/>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancelReset">取消</Button>
        <Button type="primary" size="large" @click="resetPassword('resetForm')">重置密码</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import store from '@/store'

export default {
  name: 'Home',
  data() {
    const validatePassCheck = (rule, value, callback) => {
      if (value !== this.resetForm.newPassword) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    return {
      tagsList: store.state.tagArr,
      activemenu: '商户管理,channelProvider',
      openName: 'order',
      userName: '',
      showReset: false,
      resetForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      formRule: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          {
            type: 'string', min: 6, max: 20, message: '请输入6-20位字母数字', trigger: 'blur',
          },
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            type: 'string', min: 6, max: 20, message: '请输入6-20位字母数字', trigger: 'blur',
          },
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: validatePassCheck, trigger: 'blur' },
        ],
      },
      permission: {},
      posLeft: 55
    }
  },
  store,
  methods: {
    handleClick(item) {
      this.$router.push({ path: item.url })
      this.activemenu = item.label + ',' + item.url
    },
    deleteTag(item, index) {
      this.tagsList.splice(index, 1)
      if (this.$route.path.substring(1) === item.url && this.tagsList.length >= 1) {
        this.$router.push({ path: this.tagsList[index - 1].url })
      }
    },
    handleScroll(left) {
      const scrollOuter = this.$refs.scrollOuter.offsetWidth
      const scrollBody = this.$refs.scrollBody.offsetWidth
      if (scrollBody >= scrollOuter) {
        const offseWidth = scrollBody - scrollOuter + 50
        if ((this.posLeft + left) >= 55 && left > 0) {
          this.posLeft = 55
        } else if ((this.posLeft + left) < -offseWidth && left < 0) {
          this.posLeft = -offseWidth
        } else {
          this.posLeft += left
        }
      }
    },
    checkItem(name) {
      const arr = name.split(',')
      let add = true
      this.tagsList.forEach((item, index) => {
        if (item.label === arr[0]) {
          add = false
        }
      })
      if (add) {
        this.tagsList.push({ label: arr[0], url: arr[1] })
      }
      this.activemenu = name
    },
    checkSubmenu(name) {
      this.openName = name[0]
      sessionStorage.setItem('openName', name[0])
    },
    cancelReset() {
      this.showReset = false
    },
    resetPassword(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          const params = {
            newPassword: this.resetForm.newPassword,
            oldPassword: this.resetForm.oldPassword,
          }
          // const { code, msg } = await this.$request(loginApi.updatePassword, params)
          // if (code) {
          //   this.$Message.success('修改密码成功！')
          //   this.$refs[name].resetFields()
          //   this.showReset = false
          // } else {
          //   this.$Message.error(msg)
          // }
        }
      })
    },
    showResetPassword() {
      this.showReset = true
    },
    logout() {
      sessionStorage.clear()
      this.$router.push({ path: '/' })
    },
  },
  watch: {
    async tagsList(val, oldVal) {
      await console.log(this.$refs.scrollBody)
      this.handleScroll(-2400)
    }
  },
  mounted() {
    const token = sessionStorage.getItem('token')
    // this.activemenu = this.$route.path.substring(1)
    this.userName = sessionStorage.getItem('userName')
    if (!this.permission || !token) {
      this.$router.push({ path: '/' })
      sessionStorage.clear()
    }
  },
  created() {
    this.openName = sessionStorage.getItem('openName')
    this.permission = JSON.parse(sessionStorage.getItem('permission')) || {}
  },
}
</script>
<style lang="scss" scoped>
.home-wrap {
  border: 1px solid #d7dde4;
  background: #fff;
  position: relative;
  border-radius: 4px;
  height: 100%;

  .layout {
    height: 100%;
  }
  .content {
    padding: 15px;
    background: #f5f7f9;
    width: 100%;
    overflow: auto;

    .scroll-wrap {
      width: 100%;
      min-width: 1080px;
      overflow: hidden;
      position: relative;

      .btn-con {
        position: absolute;
        background: #fff;
        z-index: 10;
        width: 48px;
        height: 45px;
        display: flex;
        border: 1px solid #eee;

        button {
          width: 46px;
        }
      }

      .left-btn {
        left: 0;
      }
      .right-btn {
        right: 0;
      }
    }

    .tags {
      background: #C0C0C0;
      padding: 5px;
      margin-bottom: 10px;
      border-radius: 5px;
      white-space: nowrap;
      position: relative;
      height: 45px;
      box-shadow: 0px 2px 6px 0px rgba(54, 42, 82, 0.2);
    }

    .sc {
      position: absolute;
      transition: left 0.3s;
    }

    .content-wrap {
      min-width: 1080px;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0px 2px 6px 0px rgba(54, 42, 82, 0.2);
    }
  }

  .sider {
    background: #fff !important;
  }

  .ivu-layout-header {
    background: #38403f;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px 0 15px;
    height: 100px;
    line-height: 100px;

    .header-logo {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .header-operate {
      height: 100%;
      color: #fff;
      .uesr-name {
        font-size: 18px;
        height: 55px;
        line-height: 65px;
        cursor: pointer;
      }
      .user-operate {
        display: flex;
        flex-direction: row;
        div {
          height: 30px;
          line-height: 30px;
          cursor: pointer;
        }
        .logout {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
